<template>
  <el-container style="height: 100vh;">
    <!-- Sidebar -->
    <el-aside width="260px" style="background-color: #f4f4f4;">
      <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" @select="handleSelect">
        <el-submenu index="1">
          <template #title>基础信息维护</template>
          <el-menu-item index="1-1">学生信息管理</el-menu-item>
          <el-menu-item index="1-2">教师信息管理</el-menu-item>
          <el-menu-item index="1-3">班级管理</el-menu-item>
        </el-submenu>
        <el-submenu index="2">
          <template #title>任务管理</template>
          <el-menu-item index="2-1">任务发布</el-menu-item>
          <el-menu-item index="2-2">任务管理</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>

    <!-- Main Content Area -->
    <el-main style="padding: 20px;">
      <el-card>
        <template #header>
          <span>学员任务管理</span>
        </template>
        <el-table :data="tableData">
          <el-table-column prop="id" label="ID" width="180"></el-table-column>
          <el-table-column prop="name" label="任务名称" width="300"></el-table-column>
          <el-table-column prop="course" label="课程" width="200"></el-table-column>
        </el-table>
      </el-card>

    </el-main>

    <!-- Right Sidebar -->
    <el-aside width="300px" style="background-color: #f7f7f7;">
      <el-card>
        <template #header>
          详情
        </template>
        <div>
          <el-button type="primary">立即使用</el-button>
          <el-divider></el-divider>
          <div>更多信息</div>
        </div>
      </el-card>

    </el-aside>
  </el-container>
</template>

<script>
import { defineComponent, reactive } from 'vue';
import { ElContainer, ElAside, ElMenu, ElSubmenu, ElMenuItem, ElMain, ElCard, ElTable, ElTableColumn, ElButton, ElDivider } from 'element-plus';

export default defineComponent({
  name: 'MaxManagement',
  components: {
    ElContainer, ElAside, ElMenu, ElSubmenu, ElMenuItem, ElMain, ElCard, ElTable, ElTableColumn, ElButton, ElDivider
  },
  setup() {
    const activeMenu = '1'; // Default active menu
    const tableData = reactive([
      { id: 1, name: '课程1', course: '智能科技' },
      { id: 2, name: '课程2', course: '智能化学' }
    ]);

    const handleSelect = (index) => {
      console.log('Selected menu:', index);
    };

    return { activeMenu, tableData, handleSelect };
  }
});
</script>

<style scoped>
.el-menu-vertical-demo {
  background-color: #333;
  color: #fff;
}
</style>
